const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 提取css文件

let HtmlWebpackPlugins = () => {
    let pageArr = [
        "index",
        "news",
        "404",
        "join",
        "industry-1",
        "industry-2",
        "industry-3",
        "industry-4",
        "industry-5",
        "industry-6",
        "about-1",
        "about-2",
        "about-3",
        "about-4",
        "party",
        "detail",
        "use",
        "use-detail"
    ];
    let arr = [];

    pageArr.forEach(item => {
        arr.push(
            new HtmlWebpackPlugin({
                template: `src/${item}.html`,
                filename: `${item}.html`
            })
        );
    });

    return arr;
};

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname, "dist")
    },
    devtool: "inline-source-map",
    devServer: {
        contentBase: "./dist"
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    // "style-loader",
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    {
                        loader: "postcss-loader", // Run postcss actions
                        options: {
                            plugins: function () {
                                // postcss plugins, can be exported to postcss.config.js
                                return [require("autoprefixer")];
                            }
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            },
            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                loader: "url-loader",
                options: {
                    limit: 8192,
                    esModule: false,
                    name: 'images/[name]_[hash:7].[ext]',
                }
            },
            {
                test: /\.html$/,
                loader: "html-loader",
                options: {
                    interpolate: true,
                }
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
        ...HtmlWebpackPlugins(),
        new CleanWebpackPlugin(),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            Popper: ["popper.js", "default"]
        })
    ]
};
